<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
		<h:form id="viewTimesheetsForm">
			<h:outputText value="Employee Timesheets" styleClass="outputTextTitle" />

			<h:panelGrid columns="5" style="margin: 0 auto; width: 100%;">
				<h:panelGroup>
					<h:outputText value="Select Year" />
					<br />
					<p:selectOneMenu id="yearMenu" value="#{viewTimesheetsBean.selectedYear}" styleClass="selectOneMenu168pxFixedWidth">
						<f:selectItems value="#{viewTimesheetsBean.yearsMap}" />
					</p:selectOneMenu>
					<p:watermark for="yearMenu" value="Select Year" />
				</h:panelGroup>

				<h:panelGroup>
					<h:outputText value="Select Month" />
					<br />
					<p:selectOneMenu id="monthMenu" value="#{viewTimesheetsBean.selectedMonth}" styleClass="selectOneMenu168pxFixedWidth">
						<f:selectItems value="#{viewTimesheetsBean.monthsMap}" />
					</p:selectOneMenu>
					<p:watermark for="monthMenu" value="Select Month" />
				</h:panelGroup>

				<h:panelGroup>
					<h:outputText value="Employee Code" />
					<br />
					<p:inputText id="employeeCode" value="#{viewTimesheetsBean.employeeCode}"/>
					<p:watermark for="employeeCode" value="Enter Employee Code" />
				</h:panelGroup>

				<h:panelGroup>
					<h:outputLabel value="#{msg['employeename.label']}" />
					<br />
					<p:inputText id="employeeName" value="#{viewTimesheetsBean.employeeName}" />
					<p:watermark for="employeeName" value="Enter Employee Name" />
				</h:panelGroup>

				<h:panelGroup>
					<br />
					<p:commandButton value="Search"	actionListener="#{viewTimesheetsBean.searcActionListener}" update="@form" />
				</h:panelGroup>
			</h:panelGrid>

			<h:panelGrid id="searchResultPanel" style="width: 100%; " rendered="#{viewTimesheetsBean.TIMESHEET_FOUND}">
				<h:outputLabel value="Timesheet search result" styleClass="outputTextSubTitle"/>
				<p:dataTable id="timesheetsTable" var="timesheet" value="#{viewTimesheetsBean.timesheets}">
	
					<p:column headerText="Employee Code">
						<h:outputText value="#{timesheet.employee.employeeCode}" />
					</p:column>
	
					<p:column headerText="Employee Name">
						<h:outputText value="#{timesheet.employee.firstName} #{timesheet.employee.lastName}" />
					</p:column>
	
					<p:column headerText="Month - Year">
						<h:outputText value="#{timesheet.month} - #{timesheet.year}" />
					</p:column>
	
					<p:column headerText="To be approved by">
						<h:outputText value="#{timesheet.approver.firstName} #{timesheet.approver.lastName}" />					
					</p:column>
					
					<p:column headerText="Status">
						<h:outputText value="#{timesheet.timesheetStatus}" />
					</p:column>
					
					<p:column style="width: 36px; text-align: center;">
						<p:commandButton id="selectButton" oncomplete="dialog.show()" update=":viewTimesheetsForm:dialog" icon="ui-icon-search" title="View" actionListener="#{viewTimesheetsBean.selectTimesheetActionListener}">  
		                	  <f:attribute name="selectedTimesheet" value="#{timesheet}"></f:attribute> 
		                </p:commandButton> 
					</p:column>
				</p:dataTable>
			</h:panelGrid>
			
			<p:dialog header="#{viewTimesheetsBean.selectedTimesheet.employee.firstName} #{viewTimesheetsBean.selectedTimesheet.employee.lastName}'s Timesheet Details for #{viewTimesheetsBean.selectedTimesheet.month} - #{viewTimesheetsBean.selectedTimesheet.year}" id="dialog" widgetVar="dialog"  resizable="false" modal="true">
				<h:panelGrid id="timesheetDetailsPanel" style="">
					
					<p:scrollPanel style="height: 400px; " >
						<p:dataTable id="timesheetDetailsTable"  value="#{viewTimesheetsBean.timesheetDetails}" var="row" >
							<p:column style="width: 90px;" >
								<f:facet name="header">
									<h:outputText value="Date" />
								</f:facet>
								<h:outputText style="width: 70px;" value="#{row.timesheetDate}" >
									<f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{viewTimesheetsBean.defaultTimeZone}"/>
								</h:outputText>					
							</p:column>
			
							<p:column style="width: 80px">
								<f:facet name="header">
									<h:outputText value="Day" />
								</f:facet>
								<h:outputText  value="#{row.dayOfWeek}"/>
							</p:column>
			
							<p:column style="width: 200px;">
								<f:facet name="header">
									<h:outputText value="Activity" />									
								</f:facet>
								<p:dataList value="#{row.projectAssignmentTimesheetDetailList}" var="activityTable" itemType="disc" rendered="#{viewTimesheetsBean.IN_PROJECT}">										
									<h:outputText value="#{activityTable.employeeProject.project.projectName} (#{activityTable.timeSpent}): " />
									<br />
									<h:outputText value="#{activityTable.activity}" style="color: #999999" />
								</p:dataList>			  
						           
								<h:outputText value="#{row.activity}" />									
							</p:column>
			
							<p:column style="width: 40px;">
								<f:facet name="header">
									<h:outputText value="In Time" />
								</f:facet>
								<h:outputText value="#{row.inTimeString}" />
							</p:column>
			
							<p:column style="width: 40px;">
								<f:facet name="header">
									<h:outputText value="Out Time" />
								</f:facet>
								<h:outputText value="#{row.outTimeString}" />
							</p:column>
			
							<p:column style="min-width: 40px;">
								<f:facet name="header">
									<h:outputText value="Hours" />
								</f:facet>
								<h:outputText value="#{row.duration}" />
							</p:column>
						</p:dataTable>  
					</p:scrollPanel>
					<h:panelGrid style="width: 100%; text-align: right;" columns="1">
						<h:panelGroup style="float: left;">
							<h:outputLabel value="Status: " />
							<h:outputText value="#{viewTimesheetsBean.selectedTimesheet.timesheetStatus}" style="color: #f46f1B; font-weight: bold;" />
						</h:panelGroup>
						<h:outputText value="Enter comment" style="float: left;" rendered="#{viewTimesheetsBean.wamUser.employeeCode eq viewTimesheetsBean.selectedTimesheet.approver.employeeCode and(viewTimesheetsBean.selectedTimesheet.timesheetStatus eq 'TO BE APPROVED')}" />
						<p:inputTextarea style="width: 99%; float: left;" id="comment" value="#{viewTimesheetsBean.approvalComment}" rendered="#{viewTimesheetsBean.wamUser.employeeCode eq viewTimesheetsBean.selectedTimesheet.approver.employeeCode and(viewTimesheetsBean.selectedTimesheet.timesheetStatus eq 'TO BE APPROVED')}">
							<p:watermark for="comment" value="Enter comment" />
						</p:inputTextarea> 
						
						<h:outputText value="Comment: #{viewTimesheetsBean.selectedTimesheet.approvalComment}" style="float: left;" rendered="#{viewTimesheetsBean.selectedTimesheet.timesheetStatus eq 'APPROVED' or viewTimesheetsBean.selectedTimesheet.timesheetStatus eq 'REJECTED'}"/>
						<h:panelGroup>
							 <p:commandButton value="Download as excel file" ajax="false" rendered="#{viewTimesheetsBean.HAS_VIEW_EMPLOYEE_TIMESHEET}"> 
							 	<p:dataExporter  type="xls" target="timesheetDetailsTable" fileName="TS-#{viewTimesheetsBean.selectedTimesheet.employee.employeeCode}-#{viewTimesheetsBean.selectedTimesheet.month}-#{viewTimesheetsBean.selectedTimesheet.year}" postProcessor="#{viewTimesheetsBean.postProcessXLS}"/>  
					        </p:commandButton>
							<p:commandButton value="Approve" rendered="#{viewTimesheetsBean.wamUser.employeeCode eq viewTimesheetsBean.selectedTimesheet.approver.employeeCode and(viewTimesheetsBean.selectedTimesheet.timesheetStatus eq 'TO BE APPROVED')}" 
											actionListener="#{viewTimesheetsBean.approveTimesheet}" update="growl" />
							<p:commandButton value="Reject" rendered="#{viewTimesheetsBean.wamUser.employeeCode eq viewTimesheetsBean.selectedTimesheet.approver.employeeCode  and(viewTimesheetsBean.selectedTimesheet.timesheetStatus eq 'TO BE APPROVED')}" 
											actionListener="#{viewTimesheetsBean.rejectTimesheet}" update="growl" />
							<p:commandButton value="Close" oncomplete="dialog.hide()"/>						
						</h:panelGroup>
					</h:panelGrid>
				</h:panelGrid>
			</p:dialog>
			<p:growl id="growl"/>
		</h:form>
	</ui:define>
</ui:composition>

